<template>
	<div class="lietou-detail content">
		<div class="detail-bg"></div>
		<div class="lietou-right">
			<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />

			<div class="lietou-detail-head">
				<h2 class="lietou-detail-h1">基本信息</h2>
				<el-button type="info" size="small" class="lahei-btn" @click="onAddShield" v-if="partherDetail.is_agent_qingtui==1">清退</el-button>
				<div class="lahei-btn" v-else>已清退</div>
				<section class="flexed">
					<div class="lietou-msg">
						<div class="lietou-msg-right">
							<p>注册手机：{{partherDetail.usertel}}</p>
							<p>注册时间：{{partherDetail.create_time}}</p>
							<p>绑定城市：{{partherDetail.agentcityname}}</p>
						</div>
					</div>
					<div class="lietou-number lietou-msg-right">
						<p>名下猎头数： {{partherDetail.lietou_count}}</p>
						<p>名下企业数： {{partherDetail.company_count}}</p>
						<p>岗位分佣： {{parseFloat(partherDetail.qiye_agent_persent).toFixed(2)}}% 
							<!-- <span class="works set-btn" @click="positionSet('position')">设置</span>
							<span><router-link :to="{path:'cityChangeHistory'}" class="works">查看调整记录</router-link></span> -->
						</p>
						<p>猎头分佣： {{parseFloat(partherDetail.lietou_agent_persent).toFixed(2)}}% 
							<!-- <span class="works set-btn" @click="positionSet('lietou')">设置</span>
							<span><router-link :to="{path:'cityChangeHistory'}" class="works">查看调整记录</router-link></span> -->
						</p>
					</div>
				</section>
			</div>
			<!-- 账户信息 -->
			<div class="lietou-detail-head">
				<h2 class="lietou-detail-h1">账户信息</h2>
				<router-link :to="{path:'cityAcount', query:{id:detailId}}" class="works lahei-btn">查看账户流水</router-link>
				<div class="acount">
					<span>账户余额：{{parseFloat(partherDetail.money).toFixed(2)}}元</span>
					<span>累计收入：{{parseFloat(partherDetail.total).toFixed(2)}}元</span>
					<span>提现中金额：{{parseFloat(partherDetail.fz_money).toFixed(2)}}元</span>
				</div>
				<div class="acount">
					<span>银行卡号：{{partherDetail.bank!== undefined&&partherDetail.bank.length>0 ? partherDetail.bank[0].bankcardno : ''}}</span>
					<span>持卡人：{{partherDetail.bank!== undefined&&partherDetail.bank.length>0 ? partherDetail.bank[0].humanname : ''}}</span>
					<span>银行名称：{{partherDetail.bank!== undefined&&partherDetail.bank.length>0 ? partherDetail.bank[0].bank : ''}}</span>
					<span>支行名称：{{partherDetail.bank!== undefined&&partherDetail.bank.length>0 ? partherDetail.bank[0].branch : ''}}</span>
				</div>
			</div>
			<!-- 名下猎头 -->
			<div class="lietou-detail-head">
				<h2 class="lietou-detail-h1">名下猎头</h2>
				<router-link :to="{path:'cityLietouList',query:{id: detailId}}" class="works  lahei-btn">查看全部</router-link>
				<el-table header-row-class-name="my-table-header" :data="tableData" class="answerTable"
				 :header-cell-style="{ background: '#eee',color:'#555555'}" stripe :row-style="{height:'50px'}"
				 :highlight-current-row="true">
				<el-table-column fixed type="index" label="序列" width="80" column-key="id" align="center"></el-table-column>
					<el-table-column prop="id" label="ID"  align="center"></el-table-column>
					<el-table-column prop="nickname" label="昵称" align="center"></el-table-column>
					<el-table-column prop="usertel" label="手机号码" align="center"></el-table-column>
					<el-table-column prop="number" label="名下工人数" align="center"></el-table-column>
					<el-table-column prop="create_time" label="注册时间" align="center"></el-table-column>
					<el-table-column align="center" label="操作" width="150">
					<template slot-scope="scope">
						<router-link :to="{path:'lietouDetail',query:{id:scope.row.id,pid:scope.row.number}}">
							<el-button type="primary" icon="el-icon-edit" size="small" class="buttonStyle">详情</el-button>
						</router-link>
					</template>
				 </el-table-column>
				</el-table>
			</div>
			<!-- 名下企业 -->
			<div class="lietou-detail-head">
				<h2 class="lietou-detail-h1">名下企业</h2>
				<router-link :to="{path:'cityCompanyList',query:{id: detailId}}" class="works  lahei-btn">查看全部</router-link>
				<el-table header-row-class-name="my-table-header" :data="qiyeTableData" class="answerTable"
				 :header-cell-style="{ background: '#eee',color:'#555555'}" stripe :row-style="{height:'50px'}"
				 :highlight-current-row="true">
					<el-table-column fixed type="index" label="序列" width="80" column-key="id" align="center"></el-table-column>
					<el-table-column prop="id" label="ID" align="center" width="100"></el-table-column>
					<el-table-column prop="cname" label="公司名称" align="center"></el-table-column>
					<el-table-column prop="usertel" label="手机号码" align="center"></el-table-column>
					<el-table-column prop="company_title" label="注册人职位" align="center"></el-table-column>
					<el-table-column prop="new_time" label="注册时间" align="center"></el-table-column>

					<el-table-column align="center" label="操作" width="150">
						<template slot-scope="scope">
							<router-link :to="{path:'companyDetail',query:{id:scope.row.id}}">
								<el-button type="primary" icon="el-icon-edit" size="small" class="buttonStyle">详情</el-button>
							</router-link>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import Breadcrumb from '@/components/Breadcrumb'
	export default {
		name: 'CityPartnerDetail',
		components:{
			Breadcrumb
		},
		computed: {
			...mapGetters([
				'token',
				'userinfo'
			])
		},
		data() {
			return {
				searchPhone: '',
				nickname:'',
				tableData: [], //表格数据T
				qiyeTableData:[],
				detailId:'',
			   partherDetail:{}//合伙人详情
			}
		},
		async created() {
			this.detailId = this.$route.query.id;
			this.loadData();
			this.loadDataQiye();//获取名下企业
			this.getUserDetail();
		},
		methods:{
			// 获取名下猎头
			async loadData() {
			  const loading = this.$loading({
				 lock: true,
				 text: 'Loading',
				 spinner: 'el-icon-loading',
				 background: 'rgba(0, 0, 0, 0.5)'
			  });
			  try {
				let data = {
				   "token": this.token,
				   "is_black":1,
				   "name": '',
				   "mobile": '',
				   "p": 1,//分页页码
				   "size": 5,//分页每页数量
					"agent_id": this.detailId
				 }
				 let res = await this.$http({
				   url: '/man/Lietou/getList',
				   method: 'post',
				   params: data
				 });
				 this.tableData = res.data;
				 loading.close();
			  } catch (e) {
				 console.log(e)
				 loading.close();
			  }
			},
			// 获取名下企业
			async loadDataQiye() {
			  try {
					let data = {
						"token": this.token,
						"mobile": '',
						"companyname": '',
						"is_black":1, //是否拉黑 1 非拉黑 -1 拉黑 空或0是全部	1
						"p": 1,//分页页码
						"size": 5,//分页每页数量
						"c_status": 0, // 0 全部 1 未审核 2 已审核 -1 已拒绝
						"agent_id": this.detailId
					}
					let res = await this.$http({
						url: '/man/Company/getList',
						method: 'post',
						params: data
					});
					this.qiyeTableData = res.data;
				} catch (e) {
					console.log(e)
				}
			},
			// 获取详情
			async getUserDetail() {
			  try {
				let data = {
				   "token": this.token,
				   "id": this.detailId
				 }
				 let res = await this.$http({
				   url: '/man/Agent/getInfo',
				   method: 'post',
				   params: data
				 });
				 this.partherDetail = res.data;
			  } catch (e) {
				 console.log(e)
			  }
			},
			// 清退
			onAddShield(){
				this.$confirm('确定清退此代理商?', '操作确认', {
					 confirmButtonText: '确定',
					 cancelButtonText: '取消',
					 type: 'warning'
				}).then(async value => {
					try {
						let res = await this.$http({
							url: '/man/Agent/qingtui',
							method: 'post',
							params: {
								"token": this.token,
								"id": this.detailId,
								"is_qingtui": 2 
							}
						});
						this.$message({
							type: 'success',
							message: '已清退!'
						});
						this.$set( this.partherDetail, 'is_agent_qingtui', '2');
					} catch (e) {
						console.log(e)
					}
				}).catch(() => {
					
				});
			},

      // 设置岗位百分比
      positionSet(type){
        let value = type=='position'?this.positionPer:this.leitouPer;
      	this.$prompt('请输入分佣百分比：', '提示', {
      		confirmButtonText: '确定',
      		cancelButtonText: '取消',
          inputValue: value,
          // inputPattern:  /^[0-9]+([.]{1}[0-9]{1,2})?$/,
          inputValidator: (val) => {
            console.log(val)
            return val==''?true:( /^[0-9]+\.{0,1}[0-9]{0,2}$/.test(val))
          },
          inputErrorMessage: '分佣仅限填写数字，最多三位',
          inputPlaceholder:'分佣仅限填写数字，最多三位',
          closeOnHashChange: false,
          closeOnClickModal: false
      	}).then(({ res }) => {
          if(res){
            this.$message({
              type: 'success',
              message: '分佣设置成功！'
            });
          }
      	})
      },
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.lietou-detail{
		// background-color: #f4f4f4;
		background-color: rgb(240, 242, 245);
		position: relative;

		.detail-bg {
		  position: fixed;
		  top: 0px;
		  left: 0;
		  bottom:0;
		  right: 0;
		  background: #f4f4f4;
		}

	}
	.lietou-detail-head{
		background-color: #fff;
		margin:0 0 20px 0px;
		padding-bottom:25px;
		position: relative;
		min-width:800px;

		.lietou-detail-h1{
			font-size:18px;
			font-weight: bold;
			padding:20px 16px 6px;
		}
		.lietou-msg{
			width:300px;
			display: flex;
			margin-left:30px;
			.avatar{
				width:80px;
				height:80px;
				border-radius: 50%;
			}
		}
		.lietou-msg-right{
			width:330px;
			margin-left:30px;
			font-size:16px;
			p{
				line-height: 35px;
				margin:0;
			}
		}
		.works{
			display: inline-block;
			color: rgba(33, 120, 241, 1);
      cursor: pointer;
		}
		.lietou-number{
			border-left:1px #ddd solid;
			padding-left:30px;
		}
		.lahei-btn{
			position: absolute;
			right:30px;
			top:25px;
		}
		.acount{
			margin:0 0 20px 30px;
			padding-top:8px;

			span{
				margin-right:50px;
			}
		}
		.answerTable{
			margin:10px auto;
			width: 96%;
		}
	}
  .set-btn{
    margin:0 20px;
  }
</style>
<style>
	.el-message{
		top:120px !important;
	}
</style>
